<template>
  <div class="app-container">
    <!-- 面包屑导航 -->
    <div style="margin-bottom: 40px;">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>网站管理</el-breadcrumb-item>
        <el-breadcrumb-item>网站配置</el-breadcrumb-item>
      </el-breadcrumb>

      <el-tabs type="border-card" @tab-click="handleClick" style="margin-top: 10px;">
        <el-tab-pane>
        <span slot="label">
          <i class="el-icon-date"></i> 网站信息
        </span>

          <el-form style="margin-left: 20px;" label-position="left" :model="form" label-width="80px" ref="from">
            <el-row :gutter="12">
              <el-col :span="6">
                <el-form-item  label="网站头像">
                  <el-upload
                    class="avatar-uploader"
                    action=""
                    :http-request="uploadWebsiteAvatar"
                    :show-file-list="false">
                    <img v-if="form.avatar" :src="form.avatar" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item  label="首页背景">
                  <el-upload
                    class="avatar-uploader"
                    action=""
                    :http-request="uploadIndexBack"
                    :show-file-list="false">
                    <img v-if="form.indexBack" :src="form.indexBack" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="10">
                <el-form-item label="网站名称" prop="name">
                  <el-input v-model="form.name" style="width: 400px"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="10">
                <el-form-item label="网站作者" prop="name">
                  <el-input v-model="form.author" style="width: 400px"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="18">
                <el-form-item label="创建日期" prop="name">
                  <el-date-picker
                    v-model="form.onlineDate"
                    type="date"
                    placeholder="选择日期" style="width: 400px">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="10">
                <el-form-item label="网站简介" prop="newPwd1">
                  <el-input v-model="form.des" style="width: 400px"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="10">
                <el-form-item label="公告" prop="newPwd1">
                  <el-input v-model="form.bulletin" style="width: 400px" type="textarea" :rows="2"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="10">
                <el-form-item label="备案号" prop="newPwd2">
                  <el-input v-model="form.recordNum" style="width: 400px"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="10">
                <el-form-item label="登录方式">
                  <el-checkbox-group v-model="loginTypes" @change="changeLoginTypeCheckBox">
                    <el-checkbox v-for="(item, index) in allLoginTypes" :label="item.id" :key="index">{{item.name}}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" @click="submitForm()">保 存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane>
        <span slot="label">
          <i class="el-icon-date"></i> 社交信息
        </span>
          <el-form style="margin-left: 20px;" label-position="left" :model="form" label-width="80px" :rules="rules" ref="form">
            <el-checkbox-group v-model="showList" @change="changeShowListCheckBox">
              <el-form-item label="QQ号" prop="qqNumber">
                <el-input v-model="form.qqNumber" style="width: 400px"></el-input>
                <el-checkbox v-if="form.isQqShow === 1" label="1" style="margin-left: 10px" checked="checked">是否展示</el-checkbox>
                <el-checkbox v-if="form.isQqShow === 0" label="1" style="margin-left: 10px" >是否展示</el-checkbox>
              </el-form-item>
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="form.phone" style="width: 400px"></el-input>
                <el-checkbox v-if="form.isPhoneShow === 1" label="2" style="margin-left: 10px" checked="checked">是否展示</el-checkbox>
                <el-checkbox v-if="form.isPhoneShow === 0" label="2" style="margin-left: 10px">是否展示</el-checkbox>
              </el-form-item>
              <el-form-item label="Gitee" prop="gitee">
                <el-input v-model="form.giteeNumber" style="width: 400px"></el-input>
                <el-checkbox v-if="form.isGiteeShow === 1" label="3" style="margin-left: 10px" checked="checked">是否展示</el-checkbox>
                <el-checkbox v-if="form.isGiteeShow === 0" label="3" style="margin-left: 10px">是否展示</el-checkbox>
              </el-form-item>
            </el-checkbox-group>
            <el-form-item>
              <el-button type="primary" @click="submitForm()">保 存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane>
        <span slot="label">
          <i class="el-icon-date"></i> 其他设置
        </span>

          <el-form style="margin-left: 20px;" label-position="left" :model="form" label-width="90px" ref="from">
            <el-row :gutter="12">
              <el-col :span="6">
                <el-form-item  label="用户头像">
                  <el-upload
                    class="avatar-uploader"
                    action=""
                    :http-request="uploadUserAvatar"
                    :show-file-list="false">
                    <img v-if="form.userAvatar" :src="form.userAvatar" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item  label="游客头像">
                  <el-upload
                    class="avatar-uploader"
                    action=""
                    :http-request="uploadVisitorAvatar"
                    :show-file-list="false">
                    <img v-if="form.visitAvatar" :src="form.visitAvatar" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="6">
                <el-form-item label="微信收款码">
                  <el-upload
                    class="avatar-uploader"
                    action=""
                    :http-request="uploadWx"
                    :show-file-list="false">
                    <img v-if="form.wxMoneyImg" :src="form.wxMoneyImg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="支付宝收款码">
                  <el-upload
                    class="avatar-uploader"
                    action=""
                    :http-request="uploadZfb"
                    :show-file-list="false">
                    <img v-if="form.zfbMoneyImg" :src="form.zfbMoneyImg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" @click="submitForm()">保 存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>


      </el-tabs>

    </div>
  </div>
</template>

<script>
import userApi from '@/api/user';
import fileApi from "@/api/file";
export default {
  data() {
    return {
      allLoginTypes: [
        {id: 1, name: 'QQ'},
        {id: 2, name: '微信'},
        {id: 3, name: '微博'}
      ],
      loginTypes: [],
      checkedLoginTypes: [],
      loginTypeLists: [],
      showList: [],
      loading: [],
      img: '123',
      form: {
        indexBack: '',
        giteeNumber: '',
        isQqShow: '',
        isPhoneShow: '',
        isGiteeShow: '',
        onlineDate: '',
        wxMoneyImg: '',
        zfbMoneyImg: '',
        visitAvatar: '',
        userAvatar: '',
        loginTypes: [],
        name: "",
        aboutMe: "",
        webUrl: "",
        keyword: "",
        summary: "",
        author: "",
        logo: "",
        recordNum: "",
        openComment: "1",
        aliPay: "",
        weixinPay: "",
        authorAvatar: "",
        authorInfo: "",
        touristAvatar: "",
        bulletin: "",
        showList: "",
        loginTypeList: ""
      },
      systemConfig: {},
      uploadPictureHost: '111' + "/file/upload",
      openDictList: [], //字典
      loginDictList: [], //字典
      files: {},
      rules: {
        qqNumber: [
          {pattern: /[1-9]([0-9]{5,11})/, message: '请输入正确的QQ号码'},
        ],
        qqGroup: [
          {pattern: /-?[1-9]\d*/, message: '请输入正确的QQ群'},
        ],
        gitee: [
          {pattern: /^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/, message: '请输入正确的Gitee地址'},
        ],
        github: [
          {pattern: /^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/, message: '请输入正确的Github地址'},
        ],
        email: [
          {pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/, message: '请输入正确的邮箱'},
        ]
      }
    };
  },
  computed: {
    /*...mapGetters([
      'pres'
    ]),*/
    canUpdate() {
      // return hasAuth(this.pres, '/system/webConfig/update')
    },
  },

  created() {
    this.fetchWebsiteInfo();
  },

  methods: {
    // 查询网站配置信息
    fetchWebsiteInfo() {
      userApi.websiteInfo().then(response => {
        if (response.code === 200) {
          this.form = response.data;
          this.loginTypes = response.data.loginTypes;
        }
      })
    },

    // 获取选中的展示方式
    changeShowListCheckBox(val) {
      // console.log('选中的展示方式:', val);
      this.showList = val;
    },

    // 获取选中的登录方式
    changeLoginTypeCheckBox(val) {
      // console.log('选中的登录方式:', val)
      this.checkedLoginTypes = val;
    },

    submitForm: function () {
      this.form.loginTypes = this.checkedLoginTypes;
      this.form.showList = this.showList;
      userApi.updateWebsiteInfo(this.form).then(response => {
        if (response.code === 200) {
          this.$notify.success({
            title: '成功',
            message: '保存成功',
            duration: 1500
          });
        } else if (response.code === 306) {
          this.$notify.error({
            title: '错误',
            message: '权限不足，请联系管理员',
            duration: 1500
          });
        } else {
          this.$notify.error({
            title: '错误',
            message: '系统异常，请稍后再试',
            duration: 1500
          });
        }
        this.fetchWebsiteInfo();
      })
    },

    // 上传网站首页背景图片
    uploadIndexBack(file) {
      const data = new FormData();
      data.append('file', file.file);
      fileApi.uploadImage(data).then(response => {
        if(response.code === 200) {
          this.form.indexBack = response.data;
        } else if (response.code === 306) {
          this.$notify.error({
            title: '错误',
            message: '您没有上传文件权限，请联系管理员',
            duration: 1500
          });
        } else {
          this.$notify.error({
            title: '错误',
            message: '系统异常，请稍后再试',
            duration: 1500
          });
        }
      }).catch(err => {
        this.$message({
          type: 'error',
          message: '上传失败'
        })
      })
    },

    // 上传网站头像
    uploadWebsiteAvatar(file) {
      const data = new FormData();
      data.append('file', file.file);
      fileApi.uploadImage(data).then(response => {
        if(response.code === 200) {
          this.form.avatar = response.data;
        } else if (response.code === 306) {
          this.$notify.error({
            title: '错误',
            message: '您没有上传文件权限，请联系管理员',
            duration: 1500
          });
        } else {
          this.$notify.error({
            title: '错误',
            message: '系统异常，请稍后再试',
            duration: 1500
          });
        }
      }).catch(err => {
        this.$message({
          type: 'error',
          message: '上传失败'
        })
      })
    },

    // 上传用户头像
    uploadUserAvatar(file) {
      const data = new FormData();
      data.append('file', file.file);
      fileApi.uploadImage(data).then(response => {
        if(response.code === 200) {
          this.form.userAvatar = response.data;
        } else if (response.code === 306) {
          this.$notify.error({
            title: '错误',
            message: '您没有上传文件权限，请联系管理员',
            duration: 1500
          });
        } else {
          this.$notify.error({
            title: '错误',
            message: '系统异常，请稍后再试',
            duration: 1500
          });
        }
      }).catch(err => {
        this.$message({
          type: 'error',
          message: '上传失败'
        })
      })
    },

    // 上传游客头像
    uploadVisitorAvatar(file) {
      const data = new FormData();
      data.append('file', file.file);
      fileApi.uploadImage(data).then(response => {
        if(response.code === 200) {
          this.form.visitAvatar = response.data;
        } else if (response.code === 306) {
          this.$notify.error({
            title: '错误',
            message: '您没有上传文件权限，请联系管理员',
            duration: 1500
          });
        } else {
          this.$notify.error({
            title: '错误',
            message: '系统异常，请稍后再试',
            duration: 1500
          });
        }
      }).catch(err => {
        this.$message({
          type: 'error',
          message: '上传失败'
        })
      })
    },

    // 上传微信收款码
    uploadWx(file) {
      const data = new FormData();
      data.append('file', file.file);
      fileApi.uploadImage(data).then(response => {
        if(response.code === 200) {
          this.form.wxMoneyImg = response.data;
        } else if (response.code === 306) {
          this.$notify.error({
            title: '错误',
            message: '您没有上传文件权限，请联系管理员',
            duration: 1500
          });
        } else {
          this.$notify.error({
            title: '错误',
            message: '系统异常，请稍后再试',
            duration: 1500
          });
        }
      }).catch(err => {
        this.$message({
          type: 'error',
          message: '上传失败'
        })
      })
    },

    // 上传支付宝收款码
    uploadZfb(file) {
      const data = new FormData();
      data.append('file', file.file);
      fileApi.uploadImage(data).then(response => {
        if(response.code === 200) {
          this.form.zfbMoneyImg = response.data;
        } else if (response.code === 306) {
          this.$notify.error({
            title: '错误',
            message: '您没有上传文件权限，请联系管理员',
            duration: 1500
          });
        } else {
          this.$notify.error({
            title: '错误',
            message: '系统异常，请稍后再试',
            duration: 1500
          });
        }
      }).catch(err => {
        this.$message({
          type: 'error',
          message: '上传失败'
        })
      })
    },


    handleClick(tab, event) {

    },

    weiXinPayMethod: function (file) {
      /*let fromData = this.initFromData(file);
      upload(fromData).then(res => {
        this.form.weixinPay = res.data
        this.loading.close()
      })*/
    },
    aliPayMethod: function (file) {
      /*let fromData = this.initFromData(file);
      upload(fromData).then(res => {
        this.form.aliPay = res.data
        this.loading.close()
      })*/
    },
    uploadSectionFile: function (file) {
      /*let fromData = this.initFromData(file);
      upload(fromData).then(res => {
        this.form.logo = res.data
        this.loading.close()
      })*/
    },
    touristUpload: function (file) {
      /*let fromData = this.initFromData(file);
      upload(fromData).then(res => {
        this.form.touristAvatar = res.data
        this.loading.close()
      })*/
    },
    authorUpload: function (file) {
      /*let fromData = this.initFromData(file);
      upload(fromData).then(res => {
        this.form.authorAvatar = res.data
        this.loading.close()
      })*/
    },
    uploadBefore: function () {
      // this.openLoading()
    },
    initFromData: function (param) {
      /*this.files = param.file
      // FormData 对象
      var formData = new FormData()
      // 文件对象
      formData.append('multipartFile', this.files)
      return formData*/
    },

    // 打开加载层
    openLoading: function () {
      /*this.loading = this.$loading({
        lock: true,
        text: "正在加载中~",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    }*/
    }
  }
}
</script>

<style scoped>
.uploadImgBody :hover {
  border: dashed 1px #00ccff;
}

img {
  width: 100px;
  height: 100px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/*.uploadImgBody :hover {
  border: dashed 1px #00ccff;
}

img {
  width: 100px;
  height: 100px;
}
.avatar-uploader1 .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader1 .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon1 {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar1 {
  width: 178px;
  height: 178px;
  display: block;
}*/
</style>
